<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="100px"
    >
      <el-form-item label="案件号" prop="case_number">
        <el-input
          v-model="queryParams.case_number"
          placeholder="请输入案件号"
          clearable
          :style="{ width: '100%' }"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="保险公司" prop="company_name">
        <el-input
          v-model="queryParams.company_name"
          placeholder="请输入保险公司"
        ></el-input>
      </el-form-item>
      <el-form-item label="案件类型" prop="case_type">
        <el-select
          v-model="queryParams.case_type"
          placeholder="请选择案件类型"
          clearable
          :style="{ width: '100%' }"
        >
          <el-option
            v-for="(item, index) in caseTypeOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属区域" prop="addressCode">
        <el-cascader
          v-model="queryParams.addressCode"
          placeholder="请选择省市区"
          :options="options"
          ref="classifyRef"
          clearable
          @change="handleChange"
          :props="{ checkStrictly: true }"
        />
      </el-form-item>
      <el-form-item label="详细地址" prop="accident_address">
        <el-input
          v-model="queryParams.accident_address"
          placeholder="请输入详细地址"
          clearable
          :style="{ width: '100%' }"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="现场查勘员" prop="surveyer">
        <el-input
          v-model="queryParams.surveyer"
          placeholder="请输入查勘员"
        ></el-input>
      </el-form-item>
      <!-- <el-form-item label="查勘状态" prop="status">
        <el-select
          v-model="queryParams.status"
          placeholder="请选择查勘状态"
          clearable
          :style="{ width: '100%' }"
        >
          <el-option
            v-for="(item, index) in surveyStatusOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <!-- <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:surveyManagement:add']"
          >新增</el-button
        >
      </el-col> -->
      <!-- <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          v-hasPermi="['system:surveyManagement:edit']"
          >修改</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          v-hasPermi="['system:surveyManagement:remove']"
          >删除</el-button
        >
      </el-col> -->
      <!-- <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          v-hasPermi="['system:surveyManagement:export']"
          >导出</el-button
        >
      </el-col> -->

      <!-- <el-col :span="1.5">
        <el-upload
          :on-success="handleImportSuccess"
          accept=".xls,.xlsx"
          :action="importUrl"
          :headers="importHeaders"
          :show-file-list="false"
        >
          <el-button
            v-hasPermi="['system:surveyManagement:import']"
            type="primary"
            plain
            icon="el-icon-upload"
            size="mini"
            >案件导入</el-button
          >
        </el-upload> -->
      <!-- <el-button type="primary" plain icon="el-icon-plus" size="mini"
          v-hasPermi="['system:surveyManagement:add']">案件导入</el-button> -->
      <!-- </el-col> -->
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>
    <el-table v-loading="loading" :data="surveyList" height="600">
      <!-- <el-table-column width="55" align="center" /> -->
      <el-table-column label="主键id" align="center" prop="id" v-if="false" />
      <el-table-column label="序号" align="center" type="index" />
      <el-table-column label="案件号" align="center" prop="case_number" />
      <el-table-column
        label="保险公司"
        :show-overflow-tooltip="true"
        align="center"
        prop="company_name"
      />
      <el-table-column label="车牌号" align="center" prop="car_number" />
      <el-table-column
        label="所属区域"
        :show-overflow-tooltip="true"
        align="center"
        prop="region"
      />
      <el-table-column label="查勘员" align="center" prop="surveyer" />
      <!-- <el-table-column label="状态" align="center" prop="status">
        <template slot-scope="scope">
          {{
            scope.row.status === 1
              ? "正在查勘"
              : scope.row.status === 2
              ? "已查勘待审核"
              : scope.row.status === 3
              ? "已查勘审核通过"
              : ""
          }}
        </template>
      </el-table-column> -->
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <!-- <template v-if="scope.row.status === 2">
            <el-popconfirm
            confirm-button-text="通过"
            cancel-button-text="不通过"
            :ref="`popover-${scope.$index}`"
            :title="`确定通过【${scope.row.case_number}】案件吗？`"
            @confirm="confirmAuditing(scope.row)"
            @cancel="cancelAuditing(scope.row)"
            >s
            <el-link style="margin: 6px;font-size:12px" type="primary" slot="reference" icon="el-icon-share" :underline="false">审核</el-link>
          </el-popconfirm>
          </template> -->
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleDetails(scope.row)"
            v-hasPermi="['system:surveyManagement:edit']"
            >上传图片</el-button
          >
          <!-- <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:surveyManagement:edit']"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:surveyManagement:remove']"
            >删除</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <edit
      :visible="editVisible"
      :formData="editData"
      :isEdit="isEdit"
      @onClose="editClose"
      @onEnter="editEnter"
      ref="editRef"
    />
    <detailsEdit
      :detailsVisible="detailsVisible"
      :formData="detailsData"
      :imgList="imgList"
      @onClose="detailsClose"
      @onEnter="detailsEnter"
      ref="detailsRef"
    />
  </div>
</template>
<script>
import Edit from "./Edit";
import detailsEdit from "./detailsEdit";
import { regionData } from "element-china-area-data";
import {
  surveyManagementList,
  addSurveyManagement,
  updateSurveyManagement,
  deleteSurveyManagement,
  getSurveyImg,
  updateSurveyExamine,
} from "@/api/system/surveyManage";
export default {
  components: { Edit, detailsEdit },
  props: [],
  data() {
    return {
      editVisible: false,
      detailsVisible: false,
      editData: {},
      detailsData: {},
      isEdit: false,
      showSearch: true,
      loading: true,
      surveyList: [],
      total: 0,
      queryParams: {
        case_number: undefined,
        case_type: undefined,
        company_name: undefined,
        addressCode: undefined,
        accident_address: undefined,
        surveyer: undefined,
        status: undefined,
        pageNum: 1,
        pageSize: 10,
      },
      options: regionData,
      areaNames: [],
      customerOptions: [],
      caseTypeOptions: [],
      regionOptions: [],
      surveyorOptions: [],
      surveyStatusOptions: [],
      imgList: [],
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getList();
    this.getSurveyStatus();
    this.getCaseType();
    this.getSurveyor();
  },
  mounted() {},
  methods: {
    handleChange(e) {
      if (e.length === 0) {
        delete this.queryParams.province;
        delete this.queryParams.city;
        delete this.queryParams.area;
      }
      if (this.$refs.classifyRef) {
        this.$refs.classifyRef.dropDownVisible = false;
      }
      this.areaNames = e
        .map((code) => this.findAreaByCode(code, this.options).label)
        .filter(Boolean);
      if (this.areaNames.length === 1) {
        this.queryParams.province = this.areaNames[0];
        delete this.queryParams.city;
        delete this.queryParams.area;
      } else if (this.areaNames.length === 2) {
        this.queryParams.city = this.areaNames[1];
        delete this.queryParams.province;
        delete this.queryParams.area;
      } else if (this.areaNames.length === 3) {
        this.queryParams.area = this.areaNames[2];
        delete this.queryParams.province;
        delete this.queryParams.city;
      }
    },
    findAreaByCode(code, options) {
      const found = options.find((option) => option.value === code);
      if (found) return found;
      for (const option of options) {
        if (option.children) {
          const childFound = this.findAreaByCode(code, option.children);
          if (childFound) return childFound;
        }
      }
      return null;
    },
    handleAdd() {
      this.$refs.editRef.form = {};
      this.$refs.editRef.imgArr = [];
      this.isEdit = false;
      this.$refs.editRef.showPicture = true;
      this.editVisible = true;
    },
    getSurveyor() {
      this.surveyorOptions = [
        {
          label: "张明",
          value: 1,
        },
        {
          label: "李森",
          value: 2,
        },
      ];
    },
    getCaseType() {
      this.caseTypeOptions = [
        { label: "工程机械类", value: 1 },
        { label: "房屋建筑类", value: 2 },
        { label: "道路设施类", value: 3 },
        { label: "电力/通讯设施类", value: 4 },
        { label: "园林绿化类", value: 5 },
        { label: "庄稼食品类", value: 6 },
        { label: "电器设备类", value: 7 },
        { label: "财产险物损类", value: 8 },
      ];
    },
    getSurveyStatus() {
      this.surveyStatusOptions = [
        {
          label: "正在查勘",
          value: 1,
        },
        {
          label: "已查勘待审核",
          value: 2,
        },
        {
          label: "已查勘审核通过",
          value: 3,
        },
      ];
    },
    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      delete this.queryParams.province;
      delete this.queryParams.city;
      delete this.queryParams.area;
      this.resetForm("queryForm");
      this.handleQuery();
    },
    getList() {
      this.loading = true;
      let params = { ...this.queryParams };
      delete params.addressCode;
      surveyManagementList(params).then((res) => {
        this.surveyList = res.data.list;
        this.surveyList = this.surveyList.map((e) => ({ ...e, region: "" }));
        this.surveyList.forEach((e) => {
          const province = e.province || "";
          const city = e.city || "";
          const area = e.area || "";
          const accident_address = e.accident_address || "";
          e.region = province + city + area + accident_address || "暂无";
        });
        this.total = res.data.total;
        this.loading = false;
      });
    },
    editEnter(e) {
      console.log(e, "DDDDDDDDDDDDDDDD");
      if (e.id) {
        updateSurveyManagement(e).then((response) => {
          this.$modal.msgSuccess("修改成功");
          this.editVisible = false;
          this.getList();
        });
      } else {
        addSurveyManagement(e).then((response) => {
          this.$modal.msgSuccess("新增成功");
          this.editVisible = false;
          this.getList();
        });
      }
    },
    editClose() {
      this.editVisible = false;
    },
    handleDetails(e) {
      getSurveyImg({ case_number: e.case_number }).then((res) => {
        this.imgList = res.data;
      });
      this.detailsData = { ...e };
      this.detailsVisible = true;
    },
    detailsClose() {
      this.detailsVisible = false;
    },
    detailsEnter() {},
    handleUpdate(e) {
      this.isEdit = true;
      this.editData = { ...e };
      this.editVisible = true;
      this.$refs.editRef.showPicture = false;
    },
    handleDelete(e) {
      this.$modal
        .confirm('是否确认删除案件号为"' + e.case_number + '"的数据项？')
        .then(function () {
          return deleteSurveyManagement({ id: e.id });
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
  },
};
</script>
<style>
.el-link [class*="el-icon-"] + span {
  margin-left: 0px;
}
</style>
